<template>
<!-- <wd-config-provider :theme-vars="themeVars"> -->
	<view>
		<wd-navbar title="标题" fixed></wd-navbar>
		<wd-card title="经营分析" style="margin-top: 14px">
			<view class="title">一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。</view>
			<template #footer>
				<wd-button size="small" plain>查看详情</wd-button>
			</template>
		</wd-card>
		<wd-card title="经营分析" style="margin-top: 640px">
		<wd-segmented :options="list" :value="current" :vibrate-short="true"></wd-segmented>
		<wd-table :data="tableDataList" height="400"  :index="{ align: 'center', width: 60 , fixed: true}">
			<wd-table-col prop="name" label="姓名"></wd-table-col>
			<wd-table-col prop="school" label="求学之所" sortable width="300"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
			<wd-table-col prop="major" label="专业"></wd-table-col>
		</wd-table>
		<view class="card"></view>
		<view>www</view>
			<view>www</view>
			<view>www</view>
			<wd-button type="info" plain loading>主要按钮</wd-button>
			<wd-button>主要按钮</wd-button>
			<wd-button type="success">成功按钮</wd-button>
			<wd-button type="info">信息按钮</wd-button>
			<wd-button type="warning">警告按钮</wd-button>
			<wd-button type="error"  loading>危险按钮</wd-button>
			
			<wd-checkbox v-model="value" @change="handleChange" size="large">单选框1</wd-checkbox>
			<wd-toast />
			<wd-button @click="showToast">toast</wd-button>
			<wd-button plain @click="actionShow = true">弹出菜单</wd-button>
			<wd-action-sheet :safe-area-inset-bottom="true" v-model="actionShow" :actions="actions" @select="select"></wd-action-sheet>
			<wd-calendar type="date" label="日期检验" v-model="dateValue" :before-confirm="beforeConfirm" />
		</wd-card>
		<!-- </theme-box> -->
	</view>
</template>

<script>
	import { ref, reactive } from 'vue'
	import { useToast, useNotify } from '@/uni_modules/wot-design-uni'
	const { showNotify, closeNotify } = useNotify()
	export default {
		setup() {
			const tabbar = ref(1)
			const value = ref(true)
			const actionShow = ref(false)
			const dateValue = ref(null)
			const actions = reactive([
				{
          name: '选项1'
        }, {
          name: '选项2'
        }, {
          name: '选项3',
          subname: '描述信息'
        }
			])
			const toast = useToast()
			showNotify('通知内容')

			const handleChange = () => {

			}
			const select  = (item, index) => {
				toast.success(`当前选中项: ${item.name}, 下标: ${index}`)
			}
			function showToast() {
				// toast.loading('提示信息')
				toast.loading({
					msg: '加载中加载中加载中加载中加载中加载中加载中...'
				})
			}

			// 日期
			const beforeConfirm = ({ value, resolve }) => {
				if (value > Date.now()) {
					toast.error('该日期暂无数据，请选择今天或今天之前的日期')
					resolve(false)
				} else {
					resolve(true)
				}
			}
			
			// 分段器
			const list = ref(['评论', '点赞', '贡献', '打赏'])
			const current = ref('点赞')
			const tableDataList = ref([
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯1',
					major: '砍人'
				},
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯2',
					major: '砍人'
				},
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯4',
					major: '砍人'
				},
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯6',
					major: '砍人'
				},
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯3',
					major: '砍人'
				},
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯2',
					major: '砍人'
				},
				{
					name: '娃哈哈',
					school: '莲华晴雯莲华晴雯莲华晴雯9',
					major: '砍人'
				}
			])
      return {
        tabbar,
				value,
				actionShow,
				actions,
				handleChange,
				select,
				beforeConfirm,
				dateValue,
				showToast,
				list,
				current,
				tableDataList
      }
		},
	}
</script>

<style lang="scss">
	.card {
    z-index: 10;
    width: 300px;
    height: 500px;
    background: linear-gradient(
    to top right,
    rgba(90, 149, 207, 0.5),
    rgba(58, 76, 99, 0.8)
    );
    // box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),
    // -10px 10px 20px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px); /*  元素后面区域添加模糊效果 */
    border-radius: 20px;
}
 @import '@/static/css/index.scss';
	.content {
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.wd-button{
		margin-bottom: 10px;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 14px;
		color: $toSun-text-color;
	}
	.wot-theme-dark{
		.title{
			color: $toNight-text-color;
		}
	}
</style>
